<template>
    <div id="login">
        <div class="login_top">
            <yd-flexbox>
                <yd-flexbox-item style="text-align:right">
                    <b @click="fastLogin">短信验证码登录</b>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
        <div class="login_box">
            <img src="../../assets/logo.png">            
        </div> 
        <yd-cell-group>
            <yd-cell-item>
                <span slot="left">用户名：</span>
                <!-- <yd-input slot="right" required :show-required-icon='false' v-model="memberName" placeholder="请输入用户名"></yd-input> -->
                <yd-input slot="right"  required :show-required-icon='false' v-model="phone" ref="phoneName" regex="mobile" placeholder="请输入注册时的手机号"></yd-input>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">密&nbsp;&nbsp;&nbsp;&nbsp;码：</span>
                <yd-input slot="right" type="password" required :show-required-icon='false' v-model="memberPasswd" placeholder="请输入密码"></yd-input>
            </yd-cell-item>
        </yd-cell-group>
        <div class="login_btn">
            <yd-button size="large" @click.native="login" bgcolor="#ef4f4f" color="#FFF">
                <span>确认登录</span>
            </yd-button>
        </div>
        <div class="login_bottom">
            <yd-flexbox>
                <yd-flexbox-item style="text-align:center">点击登录即表示同意
                    <b @click="agreement">《员工关爱平台服务条款》</b>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
        <div class="login_bottom">
            <yd-flexbox>
                <yd-flexbox-item style="text-align:left">
                    <b @click="forgetPwd" style="font-size:0.3rem;color:#3333CC">忘记密码？</b>
                </yd-flexbox-item>
                <yd-flexbox-item style="text-align:right">
                    <b @click="register" style="font-size:0.3rem;color:#000000">立即注册</b>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
    </div>
</template>

<script>

export default {
    name: 'login',
    data() {
        return {
            memberName: '',
            phone: '',
            memberPasswd: ''
        }
    },
    created: function() {
       this.$dialog.loading.close();
       window.document.title = "央联关爱平台";
    },
    methods: {
        login() {
            // 手机号码的有效性CHECK            
            let phoneName = this.$refs.phoneName;
            if (!phoneName.valid) {
                let toastMsg = phoneName.errorMsg;
                // errorCode => NOT_NULL(不能为空)、NOT_MIN_SIZE(输入字符位数不足)、NOT_REGEX_RULE(不符合规则)
                if (phoneName.errorCode == "NOT_NULL") {
                    toastMsg = "手机号"+toastMsg;
                } else {
                    toastMsg = "请输入正确的手机号";
                }
                this.$dialog.toast({
                    mes: toastMsg,
                    timeout: 1500
                });
                return false;
            }
            // 密码CHECK
            if (this.memberPasswd == '') {
                this.$dialog.toast({
                    mes: '密码不可为空',
                    timeout: 1500
                });
                return false;
            }
            this.$dialog.loading.open('正在登录');
            this.$axios.post(this.CONSTANT.wapiBaseUrl + 'member/login?memberName=' + this.phone + '&memberPasswd=' + this.memberPasswd)
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        if (response.data.msg == 'SUCCESS') {
                            // _setCustomVar:用来统计会员访客、登录访客、不同来源访客的浏览数据
                            _czc.push(["_setCustomVar","是否登录","已登录",7200]);
                            this.$store.commit('userid', response.data.object.memberId);
                            this.$store.commit('token', response.data.object.token); 
                            // 下面注释  往生产放记得打开注释  4行
                            // 退出微信再重新登录时，openId = 空
                            if (!this.$store.state.openId) {
                                this.$router.push('/author');
                            } else {
                                this.$router.go(-1);
                            }
                        } else {
                            this.$dialog.toast({
                                mes: response.data.msg,
                                timeout: 1500
                            });
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: '登录失败，请稍后重试',
                        icon: 'error',
                        timeout: 1500
                    });
                });
        },
        //快捷登陆
        fastLogin() {
            this.$router.replace('/fastLogin');
        },
        //找回密码
        forgetPwd() {
            this.$router.push('/forgetPwd');
        },
        //注册
        register() {
            this.$router.replace('/register');
        },
        agreement() {
            this.$router.push('/agreement');
        },
    }
}
</script>

<style scoped>
#login {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
}

.login_top {
    width: 100%;
    box-sizing: border-box;
    line-height: 0.8rem;
    font-size: 0.3rem;
    color: #A1A1A1;
    padding: 0.1rem 0.24rem;
}
.login_top b {
    font-weight: 400;
    color: #339900;
}

.login_box {
    width: 100%;
    height: auto;
    overflow: hidden;
}
.login_box img {
    display: block;
    height: 2.6rem;
    margin: 0.1rem auto;
}

.login_btn {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.24rem;
}

.login_bottom {
    width: 100%;
    box-sizing: border-box;
    line-height: 0.8rem;
    font-size: 0.24rem;
    color: #A1A1A1;
    padding: 0.1rem 0.24rem;
}
.login_bottom b {
    font-weight: 400;
    color: #ef4f4f;
}

.yd-cell-right .yd-btn {
    position: absolute;
    right: 0.24rem;
    top: 0.18rem;
}
</style>